<template>
	<view style="padding: 20rpx 32rpx;">
		<view class="usermain u-bdr-12">
			<view class="usermain-item u-border-bottom">
				<view class="label_text">头像</view>
				<view class="valuscss" style="margin-top: 29rpx;">
					<view style="display: flex;flex-wrap: wrap;">
						<view style="margin-right: 10rpx;position: relative;margin-bottom: 10rpx;"
							v-if='userInfo.spreaderLogo'>
							<image :src='userInfo.spreaderLogo' @click="uploadImgTitleImg" mode="aspectFill"
								style="width: 150rpx;height: 150rpx;">
							</image>
						</view>
						<view v-if='userInfo.spreaderLogo === null'
							style="width: 150rpx;height: 150rpx;background: #F7F7F7;display: flex;align-items: center;justify-content: center;">
							<image src='../../static/images/me/cam.png' style="width: 50rpx;height: 44rpx;"
								@click="uploadImgTitleImg"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="usermain-item u-border-bottom">
				<view class="label_text">其他平台截图</view>
				<view class="valuscss" style="margin-top: 29rpx;">
					<view style="display: flex;flex-wrap: wrap;">
						<view style="margin-right: 10rpx;position: relative;margin-bottom: 10rpx;"
							v-if='userInfo.certificateImages'>
							<image :src='userInfo.certificateImages' @click="uploadImgTitleImgCertificate"
								mode="aspectFill" style="width: 150rpx;height: 150rpx;">
							</image>
						</view>
						<view v-if='userInfo.certificateImages === null'
							style="width: 150rpx;height: 150rpx;background: #F7F7F7;display: flex;align-items: center;justify-content: center;">
							<image src='../../static/images/me/cam.png' style="width: 50rpx;height: 44rpx;"
								@click="uploadImgTitleImgCertificate"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="usermain-item item-padding u-border-bottom" style="display: flex;">
				<view class="label_text">名称</view>
				<view class="valuscss">
					<input type="text" v-model="userInfo.spreaderName" placeholder="请输入您的推广名称"
						style="font-weight: 500;font-size: 24rpx;color: #333333;text-align: right;" />
				</view>
			</view>
			<view class="usermain-item item-padding u-border-bottom">
				<view class="label_text">三方平台</view>
				<view class="valuscss">
					<view class="cu-form-group">
						<u-checkbox-group @change="checkboxGroupChange">
							<u-checkbox v-model="item.checked" v-for="(item, index) in privilegeList" :key="index"
								:name="item.label" style="margin-right: 18rpx;font-size: 24rpx;"
								active-color="#FD7885">{{item.label}}</u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
			</view>
			<view v-if="labelNames.indexOf('小红书') > -1" class="usermain-item item-padding u-border-bottom" style="display: flex;">
				<view class="label_text">小红书账号</view>
				<view class="valuscss">
					<input type="number" v-model="userInfo.account1" placeholder="请输入小红书账号" style="font-weight: 500;
					font-size: 24rpx;
					color: #333333;text-align: right;" />
				</view>
			</view>
			<view v-if="labelNames.indexOf('抖音') > -1"  class="usermain-item item-padding u-border-bottom" style="display: flex;">
				<view class="label_text">抖音账号</view>
				<view class="valuscss">
					<input type="number" v-model="userInfo.account2" placeholder="请输入抖音账号" style="font-weight: 500;
					font-size: 24rpx;
					color: #333333;text-align: right;" />
				</view>
			</view>
			<view v-if="labelNames.indexOf('视频号') > -1"  class="usermain-item item-padding u-border-bottom" style="display: flex;">
				<view class="label_text">视频号账号</view>
				<view class="valuscss">
					<input type="number" v-model="userInfo.account3" placeholder="请输入视频号账号" style="font-weight: 500;
					font-size: 24rpx;
					color: #333333;text-align: right;" />
				</view>
			</view>
			<view v-if="labelNames.indexOf('快手') > -1"  class="usermain-item item-padding u-border-bottom" style="display: flex;">
				<view class="label_text">快手账号</view>
				<view class="valuscss">
					<input type="number" v-model="userInfo.account4" placeholder="请输入快手账号" style="font-weight: 500;
					font-size: 24rpx;
					color: #333333;text-align: right;" />
				</view>
			</view>
			<view class="usermain-item item-padding u-border-bottom" style="display: flex;">
				<view class="label_text">综合粉丝数</view>
				<view class="valuscss">
					<input type="number" v-model="userInfo.spreaderFansNum" placeholder="请输入综合粉丝数" style="font-weight: 500;
					font-size: 24rpx;
					color: #333333;text-align: right;" />
				</view>
			</view>
			<view class="usermain-item item-padding u-border-bottom">
				<view class="label_text">自我介绍</view>
				<view class="valuscss">
					<u-input v-model="userInfo.spreaderIntr" type="textarea" style="font-weight: 500;
					font-size: 24rpx;
					color: #333333;" />
				</view>
			</view>

		</view>
		<view class="footer-btn">
			<view class="usermain-btn" @click="messagebtn()">立即提交</view>
		</view>
	</view>
</template>

<script>
	import configdata from '../../common/config.js';
	export default {
		data() {
			return {
				labelNames: [],
				labelIds: [],
				userInfo: {
					spreaderName: null,
					spreaderLogo: null,
					spreaderIntr: null,
					spreaderFansNum: 0,
					spreaderAutoRemark: null,
					spreaderState: null,
					labelIds: null,
					labelNames: null,
					certificateImages: null,
					account1: null,
					account2: null,
					account3: null,
					account4: null
				},
				privilegeList: [ //标签
					{
						id: 1,
						label: '小红书',
						checked: false,
					}, {
						id: 2,
						label: '抖音',
						checked: false,
					},
					{
						id: 3,
						label: '视频号',
						checked: false,
					},
					{
						id: 4,
						label: '快手',
						checked: false,
					},
					{
						id: 5,
						label: '其他',
						checked: false,
					}
				]
			};
		},
		onLoad(e) {},
		onShow() {
			this.getUserInfo()
			this.getSpreaderInfo()
		},
		methods: {
			resetLogo() {
				this.userInfo.spreaderLogo === null
			},
			// 获取多选标签
			checkboxGroupChange(e) {
				this.labelNames = e
			},
			getSpreaderInfo() {
				this.$Request.getT('/app/spreader/isSpreader').then(res => {
					if (res.code == 0) {
						this.userInfo = res.data.spreaderInfo
						if (res.data.spreaderInfo != null) {

							if (res.data.spreaderInfo.labelIds != null) {
								this.labelIds = res.data.spreaderInfo.labelIds.split(',')
							}
							if (res.data.spreaderInfo.labelNames != null) {
								this.labelNames = res.data.spreaderInfo.labelNames.split(',')
							}
						}
						for (var i in this.privilegeList) {
							for (var a in this.labelNames) {
								if (this.privilegeList[i].label == this.labelNames[a]) {
									this.privilegeList[i].checked = true
								}
							}
						}
					}
				})
			},
			getUserInfo() {
				if (!uni.getStorageSync('token')) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}
			},
			//放大图片
			previewImage(e, url) {
				uni.previewImage({
					urls: url,
					current: e
				});
			},

			// titleImg
			onChooseTitleImg(e) {
				let that = this;
				let url = ''
				let token = uni.getStorageSync('token');
				uni.showLoading({
					title: '上传中...'
				});
				uni.uploadFile({
					url: configdata.APIHOST + '/alioss/upload',
					filePath: e.detail.avatarUrl,
					header: {
						token: token
					},
					name: 'file',
					success: uploadFileRes => {
						url = JSON.parse(uploadFileRes.data);
						that.titleImg = url.data
						uni.hideLoading();
					}
				});

			},
			uploadImgTitleImg() {
				let token = uni.getStorageSync('token')

				if (!token) {
					this.goLoginInfo();
					return;
				}
				let that = this;
				var url = null;
				uni.showActionSheet({
					// itemList按钮的文字接受的是数组
					itemList: ["从相册选择图片"],
					success(e) {
						var index = e.tapIndex
						uni.chooseImage({
							count: 1, //默认9
							sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
							sourceType: ['album'], //从相册选择
							success: function(res) {
								uni.showLoading({
									title: '上传中...'
								});
								let token = uni.getStorageSync('token');
								let userId = uni.getStorageSync('userId');
								uni.uploadFile({
									url: configdata.APIHOST + '/alioss/upload',
									filePath: res.tempFilePaths[0],
									name: 'file',
									success: uploadFileRes => {
										url = JSON.parse(uploadFileRes.data);
										console.log(url)
										that.userInfo.spreaderLogo = url.data
										uni.hideLoading();
									}
								});
							}
						});
					}
				})
			},

			uploadImgTitleImgCertificate() {
				let token = uni.getStorageSync('token')

				if (!token) {
					this.goLoginInfo();
					return;
				}
				let that = this;
				var url = null;
				uni.showActionSheet({
					// itemList按钮的文字接受的是数组
					itemList: ["从相册选择图片"],
					success(e) {
						var index = e.tapIndex
						uni.chooseImage({
							count: 1, //默认9
							sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
							sourceType: ['album'], //从相册选择
							success: function(res) {
								uni.showLoading({
									title: '上传中...'
								});
								let token = uni.getStorageSync('token');
								let userId = uni.getStorageSync('userId');
								uni.uploadFile({
									url: configdata.APIHOST + '/alioss/upload',
									filePath: res.tempFilePaths[0],
									name: 'file',
									success: uploadFileRes => {
										url = JSON.parse(uploadFileRes.data);
										console.log(url)
										that.userInfo.certificateImages = url.data
										uni.hideLoading();
									}
								});
							}
						});
					}
				})
			},
			//统一登录跳转
			goLoginInfo() {
				uni.navigateTo({
					url: '/pages/public/loginphone'
				});
			},
			config: function(name) {
				var info = null;
				if (name) {
					var name2 = name.split("."); //字符分割
					if (name2.length > 1) {
						info = configdata[name2[0]][name2[1]] || null;
					} else {
						info = configdata[name] || null;
					}
					if (info == null) {
						let web_config = cache.get("web_config");
						if (web_config) {
							if (name2.length > 1) {
								info = web_config[name2[0]][name2[1]] || null;
							} else {
								info = web_config[name] || null;
							}
						}
					}
				}
				return info;
			},
			// 保存
			messagebtn() {
				this.labelIds = []
				for (var i in this.privilegeList) {
					for (var a in this.labelNames) {
						if (this.privilegeList[i].label == this.labelNames[a]) {
							this.labelIds.push(this.privilegeList[i].id)
						}
					}
				}
				if (this.userInfo.spreaderName == '') {
					uni.showToast({
						title: "请输入名称",
						icon: "none"
					})
					return
				} else if (this.userInfo.spreaderLogo == '') {
					uni.showToast({
						title: "请上传推广者Logo",
						icon: "none"
					})
					return
				} else if (this.userInfo.spreaderIntr == '') {
					uni.showToast({
						title: "请输入推广者简介",
						icon: "none"
					})
					return
				}

				var that = this
				uni.showModal({
					title: '温馨提示',
					content: '确定提交信息？',
					confirmColor: '#8B8FF0',
					success: e => {
						if (e.confirm) {
							this.$u.post("/app/spreader/applySpreaderInfo", {
								spreaderName: this.userInfo.spreaderName,
								spreaderLogo: this.userInfo.spreaderLogo,
								spreaderIntr: this.userInfo.spreaderIntr,
								spreaderFansNum: this.userInfo.spreaderFansNum,
								labelIds: this.labelIds.join(','),
								labelNames: this.labelNames.join(','),
								certificateImages: this.userInfo.certificateImages,
								account1: this.userInfo.account1,
								account2: this.userInfo.account2,
								account3: this.userInfo.account3,
								account4: this.userInfo.account4
							}).then(res => {
								if (res.code === 0) {
									uni.showToast({
										title: '申请信息提交成功',
										icon: "none"
									})
									setTimeout(function() {
										uni.navigateBack()
									}, 1000)

								} else {
									uni.showToast({
										title: res.msg,
										icon: "none",
										duration: 5000
									})
								}
							});
						}
					}
				});
			}
		}
	};
</script>

<style>
	page {
		background: #F7F8FF;
	}

	button::after {
		border: none;
		background-color: none;
	}

	button {
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		text-decoration: none;
		line-height: 1.35;
		overflow: hidden;
		color: #666666;
		/* background-color: #fff; */
		background-color: rgba(255, 255, 255, 0) !important;
		width: 100%;
		height: 100%;
	}

	.usermain {}

	.usermain-item {

		background: #FFFFFF;

		border-radius: 10rpx;

		justify-content: space-between;
		margin-bottom: 20rpx;
		padding: 30rpx 20rpx;
		/* border-bottom: 2rpx solid #f2f2f2; */
	}

	.usermain-item.item-padding {}

	.valuscss {
		/* width: 80%; */
	}

	.cu-form-group {
		padding: 0;
		background: #FFFFFF;
		/* text-align: right; */
	}

	.cu-form-group input {
		background: #FFFFFF;
		font-size: 28rpx;
		color: #333333;

	}

	.footer-btn {
		margin-top: 40rpx;
	}

	.footer-btn .usermain-btn {
		color: #FFFFFF;
		background: linear-gradient(90deg, #ff7581, #f8a5af);
		text-align: center;
		width: 686rpx;
		height: 80rpx;
		font-size: 28rpx;
		line-height: 80rpx;
		margin: 0 auto;
		border-radius: 40rpx;
	}

	.label_text {
		font-weight: bold;
		font-size: 28rpx;
		color: #1A1A1A;
	}
</style>